<template>
  <div v-show="$store.state.design.pantoneBoxShow" class="toolbox">
    <h3 class="tooltop ovtext">{{ $store.state.design.colorTitle }}
      <div class="closebtn" @click="cl" />
    </h3>
    <div class="toolboxmain">
      <div
        v-for="item in $store.state.design.pantoneData"
        :key="item.rgb"
        class="onepantone"
        :title="item.pantone"
        :style="{backgroundColor:'#'+item.rgb}"
        :class="{active:item.rgb===$store.state.design.choisePantone.rgb}"
        @mousedown="clickColor(item,'color')"
      >
        <div class="juanjiao" />
        <img class="gouxuan" src="/static/image/gouxuan.png" alt="choise">
      </div>
      <p class="latelyp ovtext">Recently Used Colors</p>
      <div
        v-for="item in $store.state.design.latelyColor"
        :key="item.pantone"
        class="onepantone"
        :title="item.pantone"
        :style="{backgroundColor:'#'+item.rgb}"
        :class="{active:item.rgb===$store.state.design.choisePantone.rgb}"
        @mousedown="clickColor(item,'lately')"
      >
        <div class="juanjiao" />
        <img class="gouxuan" src="/static/image/gouxuan.png" alt="choise">
      </div>
      <div class="addtextbtn" style="float: right;margin: 20px;" @click="cl">Done</div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      latelyColor: JSON.parse(localStorage.getItem('latelyColor')) || []
    };
  },
  created() {},
  mounted() {},
  methods: {
    clickColor(obj, type) {
      var myuri;
      if (this.$store.state.design.choisePantone.rgb !== obj.rgb) {
        if (type === 'color') this.$store.commit('design/addLatelyColor', obj);
        if (this.$store.state.design.colorTitle === 'Choose Your Colour') {
          svgTool.addHistoryEndToStart();
          this.$store.commit('design/setChoisePantone', obj);
          svgTool.changeColor(obj);
        } else if (this.$store.state.design.colorTitle === 'Font Colors') {
          this.$store.commit('design/setTextObj', {
            key: 'fill_color',
            value: obj.rgb
          });
          this.$store.commit('design/setTextObj', {
            key: 'pantone1',
            value: obj.pantone
          });
          myuri = encodeURIComponent(JSON.stringify(this.$store.state.design.textObj));
          getFontPic(this.$store.state.design.textObj, function(url) {
            svgTool.changeImg(url, myuri);
          });
        }
      }
    },
    cl() {
      this.$store.commit('design/setPantoneBoxShow', false);
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.addtextbtn{
  width: 150px;
  text-align: center;
  height: 37px;
  line-height: 37px;
  color: #666;
  border: 1px solid #DBD9DA;
  cursor: pointer;
  margin: 0 20px 0 auto;
  font-weight: 600;
}
.addtextbtn:hover{
  color: #339;
  border-color: #339;
}
.closebtn{
  float: right;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: url('/static/image/cl.png') no-repeat 10px 15px;
}
.closebtn:hover{
  background-image: url('/static/image/cl1.png');
}
.juanjiao{
  display: none;
  width: 0;
  height: 0;
  border-width:5px;
  border-style: solid;
  border-color: #fff;
  border-bottom-color: rgba(150,150,150,0.5);
  border-right-color: rgba(150,150,150,0.5);
}
.active .juanjiao{
  display: block;
}
.gouxuan{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 18px;
  height: 14px;
  display: none;
}
.active .gouxuan{
  display: block;
}
.onepantone{
  float: left;
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
  margin: 18px 0 0 21px;
  -webkit-box-shadow: 2px 2px 2px #eee;
          box-shadow: 2px 2px 2px #eee;
}
.onepantone:hover{
  -webkit-box-shadow: 2px 2px 2px #aaa;
          box-shadow: 2px 2px 2px #aaa;
}
.toolboxmain{
  height: calc(100% - 55px);
  overflow: auto;
}
.tooltop{
  padding-top: 5px;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-weight: 700;
}
.ovtext{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.latelyp {
  width: 100%;
  float: left;
  height: 30px;
  line-height: 30px;
  text-indent: 20px;
}
</style>
